<template>
  <el-form
    :model="queryParams"
    :rules="queryRules"
    ref="queryForm"
    size="small"
    label-width="100px"
  >
    <el-row :gutter="20" type="flex" justify="space-between">
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="检查类型">
          <el-select
            v-model="queryParams.state"
            style="width: 100%"
            placeholder="请选择状态"
            clearable
          >
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="办案人员">
          <el-input
            v-model="queryParams.a"
            placeholder="请输入"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="办案单位" prop="phone">
          <el-select v-model="queryParams.c" style="width: 100%" placeholder="请选择" clearable>
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="检查时间">
          <el-date-picker
            style="width: 100%"
            v-model="queryParams.time"
            placeholder="请选择"
            clearable
            @keyup.enter.native="handleQuery"
          /> </el-form-item
      ></el-col>
    </el-row>

    <el-row :gutter="20" type="flex">
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="被检查对象">
          <el-input
            v-model="queryParams.userNames"
            placeholder="请输入"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="是否立案">
          <el-select v-model="queryParams.d" style="width: 100%" placeholder="请选择" clearable>
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select> </el-form-item
      ></el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="是否下达文书">
          <el-select v-model="queryParams.e" style="width: 100%" placeholder="请选择" clearable>
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-form-item label="是否发现问题">
          <el-select v-model="queryParams.f" placeholder="请选择" style="width: 100%" clearable>
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select> </el-form-item
      ></el-col>
    </el-row>

    <el-row type="flex" justify="space-between" :gutter="20">
      <el-col :xs="2" :sm="12" :md="6" :lg="6">
        <el-form-item label="是否整改完毕">
          <el-select v-model="queryParams.g" style="width: 100%" placeholder="请选择" clearable>
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-row type="flex" justify="end" style="padding-right:10px">
        <el-col :xs="0" md="8">
          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              icon="el-icon-search"
              size="medium"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button :loading="loading" icon="el-icon-refresh" size="medium" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-row>
  </el-form>
</template>

<script>
export default {
  props: ['loading', 'queryParams'],
  data() {
    return {
      // 搜索表单校验
      queryRules: {
        phone: {
          pattern: /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
          message: '请输入正确的手机号码'
        }
      },
      stateOptions: [
        { value: 0, label: '异常' },
        { value: 1, label: '举报' }
      ],
      status: [
        { value: 1, label: '是' },
        { value: 0, label: '否' }
      ]
    }
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.queryParams.pageNum = 1
          this.$emit('updateList')
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$emit('reset', {})
      this.$emit('updateList')
    }
  }
}
</script>

<style lang="scss" scoped></style>
